import { debounce } from '@/utils' // 引入防抖函数

export default {
	data() {
		return {
			$_sidebarElm: null,
			$_resizeHandler: null
		}
	},
	mounted() {
		this.initListener()
	},
	activated() {
		if (!this.$_resizeHandler) {
			// 避免重复 init
			this.initListener()
		}
		// 防止 keep-alive 之后图表变形
		// 当 keep-alive 图表激活时，自动调整大小
		this.resize()
	},
	//页面销毁前，销毁事件和实例
	beforeDestroy() {
		this.destroyListener()
	},
	deactivated() {
		this.destroyListener()
	},
	methods: {
		// use $_ for mixins properties
		// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
		$_sidebarResizeHandler(e) {
			if (e.propertyName === 'width') {
				this.$_resizeHandler()
			}
		},
		/**
		 * @description 自适应不同屏幕时改变图表尺寸
		 */
		initListener() {
			//设置防抖，保证无论拖动窗口大小，只执行一次获取浏览器宽高的方法
			this.$_resizeHandler = debounce(() => {
				this.resize()
			}, 100)
			window.addEventListener('resize', this.$_resizeHandler)

			this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
			this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
		},
		/**
		 * @description 销毁事件和实例
		 */
		destroyListener() {
			window.removeEventListener('resize', this.$_resizeHandler)
			this.$_resizeHandler = null

			this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
		},
		/**
		 * @description 重绘图表函数
		 */
		resize() {
			const { chart } = this
			chart && chart.resize()
		}
	}
}
